<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #chart {
            width: 2000px;
            height: 1000px;
        }
    </style>
</head>
<body>
<input type="text" name="" id="search_name">
<button id="search">搜索</button>
<input type="text" name="" id="del_name">
<button id="del">删除</button>
<div id="chart"></div>
<script type="text/javascript">
    $("#search").click(function () {
        var name = $("#search_name").val();
        $.post('/search', {'name': name}, function (data) {
            if (data == "null") {
                alert("查询不到：" + name);
                $("#search_name").val("");
            } else {
                $("body").html(data);
            }
        });
    });
    $("#del").click(function () {
        var name = $("#del_name").val();
        $.post('/delete', {'name': name}, function (data) {
            $("body").html(data)
        });
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    var myChart = echarts.init(document.getElementById('chart'));
    // 指定图表的配置项和数据
    option = {
        legend: {
            // Try 'horizontal'
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: [
                {
                    name: '原价',
                    icon: 'rect'
                },
                {
                    name: '折后价',
                    icon: 'rect'
                }
            ]

        },
        yAxis: {
            barWidth: '10%',
            type: 'category',
            data: [
                {% for item in items %}
                    "{{ item[0]}}",
                {% endfor %}
            ]
        },
        xAxis: {},
        series: [
            {
                barWidth: '40%',
                name: '折后价',
                type: 'bar',
                data: [
                    {% for item in items %}
                        "{{ item[1]}}",
                    {% endfor %}
                ]
            },
            {
                barWidth: '40%',
                name: '原价',
                type: 'bar',
                data: [
                    {% for item in items %}
                        "{{ item[2]}}",
                    {% endfor %}
                ]

            }
        ]

    };
    myChart.setOption(option);// 基于准备好的dom，初始化 echarts 实例并绘制图表。


</script>
</body>
</html>